<template>
    <div class="articleItemContainer">
        <van-cell>
          <div slot="title" class="ArtTitle van-multi-ellipsis--l2">{{articleItem.title}}</div>
          <div slot="label">
              <div class="cover-wrap" v-if="articleItem.cover.type === 3">
                <van-image v-for="img in articleItem.cover.images" :key="img" :src="img" class="cover-item" fit="cover" />
              </div>
              <span>{{articleItem.aut_name}}</span> <span>{{articleItem.comm_count}}评论</span> <span>{{articleItem.pubdate | dateFormat('to')}} {{articleItem.pubdate | dateFormat('YY/MM/DD')}}</span>
          </div>
          <van-image v-if="articleItem.cover.type === 1" slot="default"  :src="articleItem.cover.images[0]" />
        </van-cell>
    </div>
</template>

<script>
export default {
  name: 'articleItem',
  data () {
    return {
      list: [1,2,3]
    }
  },
  props: {
    articleItem: {
      type: Object,
      required: true
    }
  },
  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
.articleItemContainer {
  .van-cell {
      padding-left: 23px;
    .van-cell__value {
      flex: unset;
      .van-image {
      width: 232px;
      height: 146px;
    }
    }
    .ArtTitle {
      color: #3A3A3A;
      font-size: 32px;
    }
    .cover-wrap {
      display: flex;
      justify-content: space-around;
      .cover-item {
        flex: 1;
        width: 232px;
        height: 146px;
        &:nth-child(2) {
          margin: 0 4px;
        }
      }
    }
  }
}
</style>
